<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            box-sizing: border-box;
        }
        .list{
            width: 100%;
            height: auto;
            position: relative;
        }
        .list .item{
            width: 100%;
            height: 40px;
            border: 1px solid red;
        }
        .list .item:nth-child(1){
            height: 60px;
            border-color: rosybrown;
        }
        .list .item:nth-child(2){
            height: 80px;
            border-color: blue;
        }
        .list .item:nth-child(3){
            height: 50px;
            border-color: darkseagreen;
        }
        .list .item:nth-child(4){
            height: 30px;
            border-color: purple;
        }
        .list .item:nth-child(5){
            height: 60px;
            border-color: deepskyblue;
        }
        .list .item:nth-child(6){
            height: 100px;
            border-color: rebeccapurple;
        }
        #line{
            width:16px;
            height: auto;
            position: absolute;
            left: 0;
            top: 0;
        }
        #line .all-line{
            width: 2px;
            background-color: #DDDDDD;
            position: absolute;
            left: 7px;
            z-index: 105;
        }
        #line .first-ele{
            width: 16px;
            height: 16px;
            background-image: url('./wuliu_line.png');
            background-size: 100%;
            z-index: 110;
            position: absolute;
        }
        #line .other-ele{
           width: 8px;
           height: 8px;
           border-radius: 50%;
           background-color: #DDDDDD;
           position: absolute;
           left: 0;
           right: 0;
           margin: 0 auto;
           z-index: 110;
        }
    </style>
</head>
<body>
    <div class="list">
        <div class="item"></div>
        <!-- <div class="item"></div> -->
        <!-- <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div> -->
        <div id="line">
             
        </div>
    </div>
    <script>
        //元素  线  圆   
        window.onload = function(){
            timeAxis()
            function timeAxis(){
                var line = document.querySelector('#line');
                var item = document.querySelectorAll('.item');
                var lineLength = item.length;
                var listHeight = document.querySelector('.list').clientHeight;
                var allLineHeight = listHeight - (item[0].clientHeight / 2) - (item[item.length - 1 ].clientHeight / 2);
                var div = document.createElement('div');
                div.classList.add('all-line');
                div.style.height = allLineHeight + "px";
                div.style.top =  (item[0].clientHeight / 2)+"px";
                line.append(div);
                var allHeight = 0;
                var domArr = [];
                for (var i =0 ; i < item.length ;i++) {
                    var ele = item[i];
                    var eleHeight = ele.clientHeight;
                    var obj = {
                        top:allHeight + ((eleHeight+2) / 2),
                    }
                    createEle(obj,i == 0)
                    allHeight+=eleHeight + 2;
                    domArr.push(obj);
                }
                renderFirstLine()
                function renderFirstLine(){
                    var firstLine = document.createElement('div');
                    firstLine.style.width = '2px';
                    firstLine.style.height = (domArr[1].top - domArr[0].top) + "px";
                    firstLine.style.background = '#FF3555';
                    firstLine.style.position = 'absolute';
                    firstLine.style.left = '7px';
                    firstLine.style.top = domArr[0].top + "px";
                    firstLine.style.zIndex = '105';
                    line.append(firstLine);
                }
                function createEle(obj,status){
                    var div = document.createElement('div');
                    if (status) {
                        div.classList.add('first-ele');
                        div.style.top =  (obj.top - 16)  + 'px';
                    } else {
                        div.classList.add('other-ele');
                        div.style.top =  (obj.top - 4)  + 'px';
                    }
                    line.append(div);
                }
            }
            
        }
    </script>
</body>
</html>